Selector

Visión General del Componente

El componente Select en Emvi UI ofrece una forma coherente de que los usuarios elijan una opción de una lista predefinida. Diseñado para claridad, accesibilidad y escalabilidad, es esencial en formularios, pantallas de configuración y paneles de ajustes donde los valores disponibles están definidos de antemano. Emvi UI incluye variantes gratuitas y premium para flujos de trabajo en Figma y Tailwind, garantizando una transición fluida de diseño a código.

Tipos y Variantes

Emvi UI incluye múltiples estilos de Select para distintos casos:
- Select estándar: desplegable básico con etiqueta y lista de opciones.
- Select con placeholder: guía al usuario antes de seleccionar.
- Select con iconos: indicadores visuales junto al texto (p. ej., bandera, moneda).
- Select agrupado: organiza opciones en categorías lógicas.
- Select deshabilitado: estado no editable, con contraste atenuado. Las variantes soportan modo claro/oscuro y utilizan tokens como select.bg, select.border y select.option.active.

Tamaños, Espaciado y Escala

Los Selects están disponibles en SM, MD y LG:
- SM: formularios compactos e interfaces densas.
- MD: valor por defecto; equilibrio entre legibilidad y densidad.
- LG: entornos táctiles, onboarding o tareas de selección críticas. El espaciado entre disparador, texto e iconos se gestiona con Auto Layout en Figma y utilidades Tailwind (px-3, gap-2, h-10), manteniendo áreas táctiles ≥44×44 px por accesibilidad.

Estados y Comportamiento

El Select soporta estados esenciales:
- Default: borde y fondo neutros.
- Hover: realce sutil de interactividad.
- Focus-visible: anillo de enfoque claro para accesibilidad.
- Selected: opción resaltada con color activo.
- Disabled: no interactivo, contraste reducido.
- Error: validación con borde, color y texto de ayuda. El desplegable se cierra automáticamente al elegir una opción, reduciendo fricción y reforzando la claridad del flujo.

Integración y Uso

Usa HTML semántico con <select> y <option> o implementaciones personalizadas con div estilizadas en Tailwind. Ejemplo:

Accesibilidad

Para Selects accesibles:
- Proporciona siempre una etiqueta visible vinculada al campo.
- En componentes personalizados, usa roles y atributos ARIA (role="listbox", role="option", aria-selected, aria-disabled).
- Navegación por teclado: Tab para enfocar, flechas para recorrer, Enter/Espacio para seleccionar.
- Mantén alto contraste y un anillo de foco visible en el disparador y las opciones.

Integración con Figma y Tailwind

En Figma, el Select incluye variantes para default, hover, focus, disabled y error. Auto Layout gestiona el espaciado entre etiqueta, disparador y opciones. En Tailwind, se construye con utilidades como rounded-md, focus-visible:ring y estados de lista en componentes personalizados. Los tokens garantizan consistencia transversal entre temas claro/oscuro.

Buenas Prácticas de Implementación

- Usa Select para opciones mutuamente excluyentes y bien definidas.
- En conjuntos extensos, prefiere Selects agrupados o con búsqueda.
- Evita listas interminables; considera carga perezosa o paginación.
- Nunca dependas solo del placeholder; la etiqueta debe ser visible.
- Alinea alturas con otros campos del formulario para coherencia visual.
- Emplea estados de error y textos de ayuda para mejorar la comprensión.

Opciones de selección flexibles

El componente UI-select ofrece opciones de selección flexibles al permitir tanto selecciones únicas como múltiples de una colección de elementos. Esta versatilidad lo hace adecuado para diversos casos de uso, desde elegir una única opción en un formulario hasta seleccionar múltiples elementos de una lista.

Modos configurables

El componente UI-select puede configurarse en dos modos distintos para satisfacer diferentes necesidades. En modo Único, los usuarios pueden seleccionar un elemento sin casillas de verificación, proporcionando una interfaz limpia y sencilla para selecciones individuales. En modo Múltiple, se muestran casillas de verificación junto a cada elemento, permitiendo a los usuarios seleccionar varios elementos a la vez. Esta funcionalidad dual garantiza que el componente UI-select pueda adaptarse a diversos requisitos de la aplicación.

Extendiendo configuración abstracta

El componente UI-select extiende toda la configuración abstracta, lo que lo hace altamente personalizable y adaptable a necesidades de diseño específicas. Los desarrolladores pueden configurar el componente para que coincida con el aspecto y la sensación de su aplicación, garantizando una integración perfecta. Nuestro UI KIT incluye componentes UI-select personalizables que pueden adaptarse fácilmente para escenarios de selección única o múltiple, proporcionando una forma fácil de usar para manejar la selección de elementos.